<template>
<view>
    <view class="top_heard">
        <view class="top_center">
            <view class="tipc" @click="chooceImg">
                <image src="@/static/images/customer_icon/apply.png" mode=""></image>
            </view>
            <view class="text">
                <view class="name">
                    <text>{{ name }}</text>
                </view>
                <view class="post">
                    <text class="Position" style="margin-right: 29upx;">{{ title }}</text>
                </view>
            </view>
        </view>
    </view>
    <view class="list">
        <view class="list_icon" @click="orderFn">
            <image src="@/static/images/orderIcon.png" mode=""></image>
            <text class="text">我的订单</text>
            <uni-icons class="icon" color="#cccccc" type="arrowright" size="20"></uni-icons>
        </view>
        <view class="list_icon" @click="planFn">
            <image src="@/static/images/orderIcon.png" mode=""></image>
            <text class="text">策划订单</text>
            <uni-icons class="icon" color="#cccccc" type="arrowright" size="20"></uni-icons>
        </view>
        <view class="list_icon" @click="approveFn">
            <image src="@/static/images/approval.png" mode=""></image>
            <text class="text">我审批的</text>
            <uni-icons class="icon" color="#cccccc" type="arrowright" size="20"></uni-icons>
        </view>
        <view class="list_icon" @click="sendFn">
            <image src="@/static/images/send.png" mode=""></image>
            <text class="text">我发起的</text>
            <uni-icons class="icon" color="#cccccc" type="arrowright" size="20"></uni-icons>
        </view>
        <view class="list_icon" @click="merchantsFn">
            <image src="@/static/images/send.png" mode=""></image>
            <text class="text">商户审核</text>
            <uni-icons class="icon" color="#cccccc" type="arrowright" size="20"></uni-icons>
        </view>
    </view>
	
    <view class="list">
        <view class="list_icon" @click="settleManageFn">
            <image src="@/static/images/orderIcon.png" mode=""></image>
            <text class="text">结算单管理</text>
            <uni-icons class="icon" color="#cccccc" type="arrowright" size="20"></uni-icons>
        </view>
        <view class="list_icon" @click="settleAuditFn">
            <image src="@/static/images/approval.png" mode=""></image>
            <text class="text">结算单审核</text>
            <uni-icons class="icon" color="#cccccc" type="arrowright" size="20"></uni-icons>
        </view>
    </view>
	
    <view class="list">
        <view class="list_icon" @click="codeFn">
            <image src="@/static/images/shoukuanma.png" mode=""></image>
            <text class="text">对公收款码</text>
            <uni-icons class="icon" color="#cccccc" type="arrowright" size="20"></uni-icons>
        </view>
        <view class="list_icon" @click="bindDingding">
            <image src="@/static/images/wode_bangding.png" mode=""></image>
            <text class="text">绑定钉钉</text>
            <uni-icons class="icon" color="#cccccc" type="arrowright" size="20"></uni-icons>
        </view>
        <view class="list_icon" @click="gotoPhone">
            <image src="@/static/images/wode_xiugaidianhua.png" mode=""></image>
            <text class="text">修改电话</text>
            <uni-icons class="icon" color="#cccccc" type="arrowright" size="20"></uni-icons>
        </view>
        <view class="list_icon" @click="goToSeting()">
            <image src="@/static/images/shezhi.png" mode=""></image>
            <text class="text">设置</text>
            <uni-icons class="icon" color="#cccccc" type="arrowright" size="20"></uni-icons>
        </view>
    </view>
</view>
</template>

<script>
import kpsImageCutter from "@/component/image-cutter/image-cutter.vue";

import dingtalk from '@/utils/dingtalk.open.js'
import titleFix from "@/utils/titleFix";
let platform = dingtalk.env.platform;

import sun from '@/utils/sun.js'
export default {
    name: "my",
    mixins: [titleFix],
    components: {
        kpsImageCutter
    },
    data() {
        return {
            isShowHotel: false, //酒店列表
            name: '', //用户名
            title: '', //职位
            url: '', //裁剪所需路径
            isShow: false, //是否显示遮罩层

        };
    },
    onLoad() {

    },
    created() {

    },
    onShow() {
        this.getUserInfo()

    },
    methods: {
        //获取用户信息
        getUserInfo() {

            let that = this;
            let id = uni.getStorageSync('user').id
            sun.request({
                url: "/h5/ucenter.Usercenter/index",
                showLoading: true,
                token: true,
                data: {
                    id: id
                },
                success(res) {
                    if (res.code == 200) {
                        that.name = res.data.realname;
                        that.title = res.data.title;
                    }
                },
                fail(e) {
                    uni.showToast({
                        icon: "none",
                        title: "服务器开小差去啦~",
                    })
                }
            })
        },
        bindDingding() {
            let that = this;
            uni.showModal({
                title: '提示',
                content: '确认绑定钉钉?',
                success(res) {
                    if (res.confirm) {
                        if (platform != 'notInDingTalk') {
                            dingtalk.ready(function () {
                                dingtalk.runtime.permission.requestAuthCode({
                                    corpId: 'ding7f6f146b7c5505bc35c2f4657eb6378f',
                                    onSuccess: function (info) {
                                        let url =
                                            'http://crm.hongsizg.com/h5/ucenter.ding/getUserInfo';
                                        let token = uni.getStorageSync("token");
                                        let params = {
                                            token: token,
                                            code: info.code
                                        };

                                        uni.request({
                                            url: url,
                                            method: 'POST',
                                            data: params,
                                            dataType: 'json',
                                            header: {
                                                'content-type': 'application/x-www-form-urlencoded',
                                            },
                                            success: (res) => {
                                                if (res.data.code == '200') {
                                                    uni.showToast({
                                                        title: '绑定成功'
                                                    })
                                                } else {
                                                    uni.showToast({
                                                        title: '已绑定'
                                                    })
                                                }
                                            },
                                            fail: (res) => {
                                                uni.showToast({
                                                    icon: "none",
                                                    title: JSON
                                                        .stringify(res)
                                                })

                                            }
                                        })
                                    }
                                });
                            });
                        } else {
                            uni.showToast({
                                title: '请在钉钉上绑定'
                            })
                        }
                    }
                }
            })
        },
        //编辑名字
        gotoEditNmae() {
            uni.navigateTo({
                url: "editName/editName"
            })
        },
        //修改密码
        gotoPassword() {
            uni.navigateTo({
                url: "editPassword/editPassword"
            })
        },
        //修改手机号
        gotoPhone() {
            uni.navigateTo({
                url: "editPhone/editPhone"
            })
        },
        // 结算单管理
        settleManageFn() {
            uni.navigateTo({
                url: "../order/settlement/list"
            })
        },
        // 结算单审核
        settleAuditFn() {
            uni.navigateTo({
                url: "../order/settlement/auditList"
            })
        },
        //退出登录
        logOut() {
            uni.clearStorageSync();
            uni.navigateTo({
                url: "../login/login"
            })
            // #ifdef APP-PLUS
            // plus.runtime.quit();    // 注意：iOS 平台不支持此 API，只能是用户主动杀进程。
            // #endif
        },
        //我的订单
        orderFn() {
            uni.navigateTo({
                url: "../order/index"
            })
        },
        //我的订单
        planFn() {
            uni.navigateTo({
                url: "../order/plan"
            })
        },
        //对公收款
        codeFn() {
            uni.navigateTo({
                url: "/pages/my/receiptCode/receiptCode"
            })
        },
        //我审批的
        approveFn() {
            uni.navigateTo({
                url: "/pages/my/myApproval/myApproval"
            })
        },
        //我发起的
        sendFn() {
            uni.navigateTo({
                url: "/pages/my/mySend/mySend"
            })
        },
        //商户审核
        merchantsFn() {
            uni.navigateTo({
                url: "/pages/my/merchantsAudit/merchantsAudit"
            })
        },
        onok(ev) {
            let _this = this
            uni.uploadFile({
                url: "",
                filePath: ev.path,
                name: 'file',
                formData: {
                    id: uni.getStorageSync('userdata').id,
                },
                success: (res) => {
                    if (JSON.parse(res.data).code == 200) {

                        _this.url = "";
                        _this.getUser("user_avatarurl")
                        _this.isShow = false;
                        // _this.$refs.imgPopup.close()
                        uni.showToast({
                            icon: "none",
                            title: "更换成功"
                        })
                    } else {
                        uni.showToast({
                            icon: "none",
                            title: "更换失败"
                        })
                    }

                }
            })

        },
        oncancle() {
            // url设置为空，隐藏控件
            this.url = "";
        },
        //换头像
        chooceImg() {
            this.isShow = true;
            // this.$refs.imgPopup.open()
        },
        //关闭弹框
        closeModel() {
            this.isShow = false;
        },
        //打开相册
        photoAlbum() {
            let _this = this
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album'], //从相册选择
                success: function (res) {
                    _this.url = res.tempFilePaths[0]
                }
            });
        },
        //打开相机
        photograph() {
            let _this = this
            uni.chooseImage({
                count: 1, //默认9
                sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['camera'], //从相册选择
                success: function (res) {
                    _this.url = res.tempFilePaths[0]
                }
            });
        },
        goToSeting() {
            uni.navigateTo({
                url: "mySet/mySet"
            })
        }
    }
}
</script>

<style lang="less">
page {
    padding: 0;
    z-index: 999;
    background-color: #f4f4f4;
}

.top_heard {
    background: rgba(64, 108, 235, 1);
}

.top_center {
    padding: 60upx 40upx 40upx;
    display: flex;
    justify-content: left;

    .tipc {
        image {
            width: 104upx;
            height: 104upx;
            background: rgba(240, 240, 240, 1);
            border-radius: 50%;
        }
    }

    .text {
        padding-left: 30upx;

        .name {
            font-size: 34upx;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }

        .post {
            position: relative;

            .Position {
                font-size: 26upx;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(191, 207, 255, 1);
            }

            .store {
                font-size: 26upx;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(255, 255, 255, 1);
            }

            .top_bottom {
                background: #ffffff;
                position: absolute;
                right: -180upx;
                top: 50upx;

                .center_list {
                    white-space: nowrap;
                    text-align: center;
                    padding: 4upx 10upx;
                    border-bottom: 1upx solid rgba(226, 226, 226, 1);
                    font-size: 24upx;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: rgba(41, 46, 59, 1);
                }
            }
        }
    }
}

.list {
    background-color: #fff;
    padding-left: 34upx;
    margin-top: 40upx;

    .list_icon {
        width: 100%;
        height: 44px;
        border-bottom: 1upx solid rgba(226, 226, 226, 1);
        display: flex;
        align-items: center;
        position: relative;

        image {
            width: 20px;
            height: 20px;
            margin-right: 8px;
        }

        .text {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(41, 46, 59, 1);
        }

        .icon {
            position: absolute;
            right: 20px;
            top: 50%;
            margin-top: -20upx;
        }
    }

    .list_icon:last-child {
        border: none;
    }
}

.space20 {
    height: 40upx;
    background-color: #f4f4f4;
}

.model {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
}

.model .btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 1001;
}

.model .btn button {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    font-size: 26upx;
    background: none;
    background: #ffffff;
}
</style>
